<script setup lang='ts'>

import type { User } from '@/types/home'

defineProps<{
  list: User[]
}>()

const scroll: UniHelper.ScrollViewOnScroll = (e) => {
  // console.log(e.detail.scrollLeft)
}

const gotoDept = () => {
  uni.navigateTo({
    url: '/pages/dept/dept?deptId=101&deptName=内科',
  })
}
</script>

<template>
  <view class='page'>
    <uni-section class='uni-title' titleColor='#000' titleFontSize='18px' title='热门医生'
                 sub-title='多科室千余医生任意选'>
      <template v-slot:right>
        <uni-icons @click='gotoDept()' type='right' size='18' color='#999'></uni-icons>
      </template>
    </uni-section>
    <scroll-view class='scroll-view_H' scroll-x='true' @scroll='scroll' scroll-left='120'>
      <navigator :url='`/pages/userDetails/userDetails?userId=${item.userId}`' class='docterItem scroll-view-item_H'
                 v-for='item in list' :key='item?.userId'>
        <view class='picture'>
          <image :src='item?.picture'></image>
        </view>
        <view class='honor'>{{ item.userName }}</view>
        <view class='introduction'>{{ item.introduction }}</view>
        <button class='green'>预约</button>
      </navigator>
    </scroll-view>
  </view>
</template>

<style scoped lang='scss'>
.scroll-view_H {
  white-space: nowrap;
  width: 100%;
  background-color: #fff;

  .scroll-view-item_H {
    display: inline-block;
    width: 33%;
    margin: 0 10rpx;
    text-align: center;
    background-color: #f8f9fb;

    view {
      margin: 5rpx 0;
    }

    .green {
      background: #3ecd80;
      width: 120rpx;
      font-size: 22rpx;
      font-weight: bolder;
      color: #ffffff;
    }

    .honor {
      font-weight: bolder;
    }

    .picture {
      image {
        border-radius: 50%;
        width: 120rpx;
        height: 120rpx;
      }
    }

    .introduction {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: 26rpx;
      color: #999999;
    }
  }

  .docterList {
    white-space: nowrap;
    width: 40%;

    .docterItem {
      text-align: center;

      .introduction {
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }

}


.scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}


</style>
